<script lang="ts">
  import { DeviceStatus } from "./type";
  import { tweened } from "svelte/motion";
  import { cubicOut } from "svelte/easing";

  export let status: DeviceStatus = DeviceStatus.normal;
  export let label: string = "";
  export let value: number = 0;
  const innerValue = tweened(0, {
    duration: 1000,
    easing: cubicOut,
  });
  $: innerValue.set(+value);
</script>

<div class="w-full flex flex-col items-center">
  <div class="text-xs color {status} 2xl:text-xl 3xl:text-3xl">{label}</div>
  <div
    class="text-white value {status} font-bold text-2xl 2xl:text-3xl 3xl:text-6xl"
  >
    {Math.ceil($innerValue)}
  </div>
</div>

<style>
  .color.error {
    color: #aa59e7;
  }

  .color.normal {
    color: #448bff;
  }

  .color.offline {
    color: #ed687b;
  }

  .color.warning {
    color: #f3d736;
  }

  .value.error {
    text-shadow: #db0000 1px 0 10px;
  }

  .value.normal {
    text-shadow: #33b32c 1px 0 10px;
  }

  .value.offline {
    text-shadow: #b1b1b1 1px 0 10px;
  }

  .value.warning {
    text-shadow: #ffc000 1px 0 10px;
  }
</style>
